<template>
  <div class="coordinate-container"
       :class="[{'focusStyle' : boxFocus}, {'errorStyle' : pointError || pointFormatError}, {'disableStyle' : btnStatus}]">
    <div class="coord-content">
      <span class="coord-item">
        <span>N</span>
        <input v-model.trim="coordinateArr.lat.deg"
               :maxlength="2" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>°</span>
        <input v-model.trim="coordinateArr.lat.min"
               :maxlength="2" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>′</span>
        <input v-model.trim="coordinateArr.lat.sec"
               :maxlength="2" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>″</span>
      </span>
      <span class="coord-item">
        <span>E</span>
        <input v-model.trim="coordinateArr.lng.deg" class="long-item"
               :maxlength="3" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>°</span>
        <input v-model.trim="coordinateArr.lng.min"
               :maxlength="2" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>′</span>
        <input v-model.trim="coordinateArr.lng.sec"
               :maxlength="2" :disabled="btnStatus"
               @focus="onInputFocus" @blur="onInputBlur">
        <span>″</span>
      </span>
      <span class="el-icon-error icon-item" @click="onClickClearPoint" v-show="showIcon"></span>
    </div>
    <div v-show="errorText" class="error-text">{{errorText}}</div>
  </div>
</template>
<script>
  export default {
    props: {
      selfPointArr: {

      },
      pointError: {
        type: Boolean,
        required: false,
        default: false
      },
      btnStatus: {
        type: Boolean,
        required: false,
        default: false
      },
      parentErrorText: {
        type: String,
        required: false,
        default: ''
      }
    },
    data() {
      return {
        coordinateArr: this.selfPointArr,
        boxFocus: false,
        pointFormatError: false,
        errorText: this.parentErrorText,    //错误提示
      }
    },
    methods: {
      //输入框获得焦点
      onInputFocus() {
        this.boxFocus = true;
      },
      onInputBlur() {
        this.boxFocus = false;
      },
      //点击清空坐标
      onClickClearPoint() {
        this.coordinateArr = {
          lng: {
            deg: '',
            min: '',
            sec: ''
          },
          lat: {
            deg: '',
            min: '',
            sec: ''
          }
        };
        this.pointFormatError = false;
        this.$emit('onClickClearPoint', false);
      },
    },
    computed: {
      showIcon() {
        return !this.btnStatus && (this.coordinateArr.lng.deg || this.coordinateArr.lng.min
          || this.coordinateArr.lng.sec || this.coordinateArr.lat.deg || this.coordinateArr.lat.min
          || this.coordinateArr.lat.sec)
      },
      //校验经纬度输入是否正确
      validateCoordinate() {
        let flag = true;
        let item = this.coordinateArr;
        let reg = /^[0-9]+$/;
        if (item.lng.deg && !reg.test(item.lng.deg)) {
          flag = false;
          this.errorText = '请输入正确的经度格式';
          return;
        } else if (item.lng.deg < 0 || item.lng.deg > 180) {
          flag = false;
          this.errorText = '坐标需要在纬度0-90,经度0-180范围内';
          return;
        } else if (item.lng.min < 0 || item.lng.min >= 60) {
          flag = false;
          this.errorText = '坐标的分和秒需要小于60';
          return;
        } else if (item.lng.min && !reg.test(item.lng.min)) {
          flag = false;
          this.errorText = '请输入正确的经度分值格式';
          return;
        } else if (item.lng.sec < 0 || item.lng.sec >= 60) {
          flag = false;
          this.errorText = '坐标的分和秒需要小于60';
          return;
        } else if (item.lng.sec && !reg.test(item.lng.sec)) {
          flag = false;
          this.errorText = '请输入正确的经度秒值格式';
          return;
        } else if (item.lat.deg < 0 || item.lat.deg > 90 ) {
          flag = false;
          this.errorText = '坐标需要在纬度0-90,经度0-180范围内';
          return;
        } else if (item.lat.deg && !reg.test(item.lat.deg)) {
          flag = false;
          this.errorText = '请输入正确的纬度格式';
          return;
        } else if (item.lat.min < 0 || item.lat.min >= 60) {
          flag = false;
          this.errorText = '坐标的分和秒需要小于60';
          return;
        } else if (item.lat.min && !reg.test(item.lat.min)) {
          flag = false;
          this.errorText = '请输入正确的纬度分值格式';
          return;
        } else if (item.lat.sec < 0 || item.lat.sec >= 60) {
          flag = false;
          this.errorText = '坐标的分和秒需要小于60';
          return;
        } else if (item.lat.sec && !reg.test(item.lat.sec)) {
          flag = false;
          this.errorText = '请输入正确的纬度秒值格式';
          return;
        }
        return flag;
      },
    },
    watch: {
      coordinateArr: {
        handler(newV){
          this.$emit('onPointChange', newV);
          if (isNaN(newV.lng.deg)) {
            this.errorText = '请输入正确度格式';
            this.pointFormatError = true;
          } else if (isNaN(newV.lng.min)) {
            this.errorText = '请输入正确分格式';
            this.pointFormatError = true;
          } else if (isNaN(newV.lng.sec)) {
            this.errorText = '请输入正确秒格式';
            this.pointFormatError = true;
          } else if (isNaN(newV.lat.deg)) {
            this.errorText = '请输入正确度格式';
            this.pointFormatError = true;
          } else if (isNaN(newV.lat.min)) {
            this.errorText = '请输入正确分格式';
            this.pointFormatError = true;
          } else if (isNaN(newV.lat.sec)) {
            this.errorText = '请输入正确秒格式';
            this.pointFormatError = true;
          } else if (!this.validateCoordinate) {
            this.pointFormatError = true;
          } else {
            this.pointFormatError = false;
            if (!this.parentErrorText) {
              this.errorText = '';
            }
          }
        },
        deep: true
      },
      selfPointArr: {
        handler(val) {
          this.coordinateArr = val;
          if (!val) {
            this.coordinateArr = {
              lng: {
                deg: '',
                min: '',
                sec: ''
              },
              lat: {
                deg: '',
                min: '',
                sec: ''
              }
            }
          } else {
            if (!val.lng) {
              this.coordinateArr.lng = {
                deg: '',
                min: '',
                sec: ''
              }
            } else {
              Object.keys(val.lng).forEach((item) => {
                val.lng[item] = val.lng[item].toString();
              })
            }
            if (!val.lat) {
              this.coordinateArr.lat = {
                deg: '',
                min: '',
                sec: ''
              }
            } else {
              Object.keys(val.lat).forEach((item) => {
                val.lat[item] = val.lat[item].toString();
              })
            }
          }
        },
        deep: true
      },
      parentErrorText(val) {
        this.errorText = val;
      },
      pointFormatError(val) {
        this.$emit('watchPointError', val);
      },
      errorText(val) {
        this.$emit('watchErrorText', val);
      }
    }
  }
</script>
<style scoped>
  .coordinate-container {
    display: inline-block;
    width: 208px;
    /* width: 210px; */
    height: 32px;
    line-height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    padding: 0 5px;
    position: relative;
    text-align: left;
  }
  .coordinate-container:hover {
    border-color: #c0c4cc;
  }
  .coordinate-container.focusStyle {
    border-color: #27C1E4;
  }
  .coordinate-container.errorStyle {
    border-color: #F56C6C;
  }
  .coordinate-container.disableStyle {
     background-color: #F5F7FA;
     color: #C2C2C2;
     cursor: not-allowed;
   }
  .coordinate-container.disableStyle:hover {
   border-color: #dcdfe6;
  }
  .disableStyle input {
    color: #C2C2C2 ;
    border-bottom: 1px solid #C2C2C2  !important;
    cursor: not-allowed;
  }
  .coord-content {
    position: relative;
    height: 38px;
  }
  .coord-item {
    font-size: 0;
    margin-right: 5px;
  }
  .coord-item span, .coord-item input {
    font-size: 14px;
  }
  .coordinate-container input {
    width: 20px;
    border: none;
    border-bottom: 1px solid #a7a7a7;
    text-align: center;
    background-color: transparent;
  }
  input.long-item {
    width: 25px;
  }
  .coordinate-container input:focus {
    outline: none;
  }
  .icon-item {
    cursor: pointer;
    color: #D5D5D5;
    position: absolute;
    top: 9px;
    right: 0;
  }
  .error-text {
    position: absolute;
    color: #F56C6C;
    font-size: 12px;
    margin: 0 -5px;
    line-height: 1;
    padding-top: 4px;
    top: 100%;
    left: 5px;
  }
</style>
